@import "../../style/constant";

.tabViewContainer {
  white-space: nowrap;
}

.tabView {
  background-color: #fff;
  border-bottom: 1px solid $borderColor;
  box-sizing: border-box;
  height: 44px;
  display: flex;
  align-items: center;
  position: relative;

  .tab-item {
    position: relative;
    width: 86px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: $weak;
    font-size: 15px;
    height: 100%;

    &.active {
      color: $primaryBlack;
      font-weight: 500;
    }
  }

  .tab-item-text {
    position: relative;
    display: flex;
    flex-direction: column;
  }

  .tab-item-dot {
    position: absolute;
    right: -5px;
    top: -5px;
    z-index: 5;
    width: 8px;
    height: 8px;
    border-radius: 4px;
    background-color: #FF3B30;
  }

  .tab-indicate {
    position: absolute;
    height: 2px;
    width: 86px;
    background-color: $theme;
    bottom: 0;
    transition: all 0.3s ease;
  }
}
